<template>
  <div class="login-container">
    <el-form :rules="rules"ref="form" :model="form" label-width="80px" class="login-form">
      <h2 class="login-title">疫情防控管理系统</h2>
      <el-form-item label="用户名"  prop="userName">
        <el-input prefix-icon="el-icon-user" type="username" v-model="form.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="passWord">
        <el-input  prefix-icon="el-icon-lock" type="password" v-model="form.passWord" show-password></el-input>
      </el-form-item>

      <el-form-item label="确认密码" prop="checkPassWord">
        <el-input  prefix-icon="el-icon-lock" type="password" v-model="form.checkPassWord" show-password></el-input>
      </el-form-item>

<!--      <el-form-item label="年龄" prop="age">-->
<!--        <el-input prefix-icon="el-icon-edit" type="age" v-model="form.age"></el-input>-->
<!--      </el-form-item>-->

      <el-form-item label="邮箱" prop="email">
        <el-input  prefix-icon="el-icon-message" type="email" v-model="form.email"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="login">立即注册</el-button>
        <router-link to="/login" class="link-type" style="margin-left: 100px" >
          <span>已有账号？前往登录</span>
        </router-link>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
      }
      else if (value.length<=4){
        callback(new Error('密码长度应该大于等于5位'));
      }
      else {
        if (this.form.checkPassWord !== '') {
          this.$refs.form.validateField('checkPassWord');
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));

      }
      else if (value.length<=4){
        callback(new Error('密码长度应该大于等于5位'));
      }
      else if (value !== this.form.passWord) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      form: {
        userName: '',
        passWord: '',
        checkPassWord: '',
        email: ''
      },
      rules: {
        userName: [
          { message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 20, message: '用户名长度要大于2', trigger: 'blur' }
        ],
        passWord: [
          { validator: validatePass, trigger: 'blur' }
        ],
        checkPassWord: [
          { validator: validatePass2, trigger: 'blur' }
        ],
        email: [
          {  message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur'}
        ]

      }
    };
  },

  methods: {
    login(){
      this.$refs['form'].validate((valid) => {
        if (valid) { //表单校验合法
          this.request.post("/user/register",this.form).then(res =>{
            if(res.code === 200 ){
              localStorage.setItem("user",JSON.stringify(res.data)) //把用户信息存储到浏览器
              this.$router.push("/login")
              this.$message.success("注册成功")
            }
            else {
              this.$message.error(res.message)
            }
          })
        }
      });
    }
  }
}
</script>

<style scoped>
.login-form {
  width: 400px;
  margin: 160px auto; /* 上下间距160px，左右自动居中*/
  background-color: rgba(108,225,254,0.7); /* 透明背景色 */
  padding: 30px;
  border-radius: 20px; /* 圆角 */
}

/* 背景 */
.login-container {
  opacity: 80%;
  height: 100%;
  width: 100%;
  background-size: cover;
  position: absolute; /* 不可缺少 */
  background-repeat: no-repeat;
  background-image: url("../assets/background.png");
}

/* 标题 */
.login-title {
  color: #303133;
  text-align: center;
}
.router-link-active {
  color: yellow;
}
a{
  color: #29A8EFFF;
}
</style>